<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>数据导入 ES</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- 引入数据导入ES页面私有样式 -->
    <link rel="stylesheet" href="/css/import-es.css">
</head>
<body>
<div class="container">
    <h1>📤 数据导入 ES</h1>
    <a href="/" class="back-link">← 返回首页</a>

    <!-- 表单区域 -->
    <div class="section">
        <!-- 数据源选择 -->
        <label for="dbId">选择数据源:</label>
        <select id="dbId" onchange="loadDbs()">
            <option value="">-- 请选择 --</option>
        </select>

        <!-- 数据库选择 -->
        <label for="dbName">选择数据库:</label>
        <select id="dbName" onchange="loadTables()" disabled>
            <option value="">-- 请选择 --</option>
        </select>

        <!-- 数据表选择 -->
        <label for="tableName">选择数据表:</label>
        <select id="tableName" onchange="fillIndex()" disabled>
            <option value="">-- 请选择 --</option>
        </select>

        <!-- WHERE条件输入 -->
        <label for="condition">条件 (WHERE):</label>
        <input type="text" id="condition" placeholder="如 id > 100">

        <!-- ES索引名称输入 -->
        <label for="indexName">索引名称:</label>
        <input type="text" id="indexName" placeholder="留空则自动生成">

        <!-- 规则文件路径选择 -->
        <label for="rulePath">规则文件路径:</label>
        <div style="display: flex; gap: 8px; align-items: center;">
            <input type="text" id="rulePath" placeholder="点击右侧按钮选择规则文件" readonly
                   style="flex: 1; cursor: pointer;" onclick="openFileSelectModal()">
            <button type="button" id="fileSelectBtn" onclick="openFileSelectModal()"
                    style="width: auto; padding: 10px 20px; margin: 8px 0;">
                📂 选择文件
            </button>
        </div>

        <!-- 按钮组：提交和重置 -->
        <div class="button-group">
            <button type="button" id="submitBtn" onclick="submitImport()">提交导入 ES</button>
            <button type="button" id="resetBtn" onclick="resetForm()" class="btn-secondary">重置</button>
        </div>

        <!-- 提交状态提示 -->
        <span id="importStatus" class="status"></span>
    </div>

    <!-- 进度监控区域（默认隐藏） -->
    <div id="progressSection" style="display: none; margin-top: 20px;">
        <div class="section">
            <h3>📊 导入进度监控</h3>

            <!-- 批次号显示 -->
            <div style="margin-bottom: 16px;">
                <strong>批次号：</strong><span id="batchNoDisplay" style="color: #3498db;"></span>
            </div>

            <!-- 数据量对比显示 -->
            <div style="margin-bottom: 16px; font-size: 16px;">
                <strong>数据处理：</strong>
                <span id="finishCountDisplay" style="color: #27ae60; font-weight: 700;">0</span>
                <span> / </span>
                <span id="totalCountDisplay" style="font-weight: 700;">0</span>
                <span style="color: #7f8c8d; margin-left: 8px;">条</span>
            </div>

            <!-- 进度条 -->
            <div class="progress-bar-container">
                <div id="progressBar" class="progress-bar-fill"></div>
            </div>

            <!-- 进度百分比文本 -->
            <p id="progressText" style="margin-top: 8px; font-weight: 600;">等待任务开始...</p>

            <!-- 后端消息展示区域（如错误详情或成功提示） -->
            <p id="progressMsg" class="progress-msg"></p>
        </div>
    </div>
</div>

<!-- 文件选择模态框 -->
<div id="fileSelectModal" class="modal">
    <div class="modal-content modal-file-selector">
        <!-- 标题栏 -->
        <div class="modal-header">
            <h2 id="fileSelectorTitle" class="modal-title">📂 选择文件</h2>
            <span class="close" onclick="closeFileSelectModal()">&times;</span>
        </div>

        <!-- 面包屑和搜索栏（70% + 30%）-->
        <div class="modal-breadcrumb-search-row">
            <!-- 面包屑导航（左侧 70%）-->
            <div class="modal-breadcrumb-container">
                <nav class="breadcrumb" id="modalBreadcrumb">
                    <span class="breadcrumb-item" data-path="">根目录</span>
                </nav>
            </div>

            <!-- 搜索框（右侧 30%）-->
            <div class="modal-search-container">
                <input type="text" id="modalSearchInput" placeholder="搜索文件/文件夹..." autocomplete="off"/>
                <button type="button" id="modalSearchBtn" onclick="FileSelector.handleSearch()" title="搜索">🔍</button>
            </div>
        </div>

        <!-- 状态消息 -->
        <div id="modalStatusMsg" class="status modal-status-msg"></div>

        <!-- 文件列表容器 -->
        <div class="modal-file-list-container">
            <table class="modal-file-table">
                <thead>
                <tr>
                    <th style="width: 8%;">类型</th>
                    <th style="width: 52%;">名称</th>
                    <th style="width: 20%;">大小</th>
                    <th style="width: 20%;">修改时间</th>
                </tr>
                </thead>
                <tbody id="modalFileTableBody">
                <tr>
                    <td colspan="4" style="text-align: center; color: #7f8c8d;">
                        正在加载...
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 底部按钮 -->
        <div class="modal-footer">
            <button type="button" onclick="closeFileSelectModal()" class="btn-secondary">
                取消
            </button>
        </div>
    </div>
</div>

<!-- JavaScript 引入顺序：先工具，再API，再文件选择器组件，最后业务逻辑 -->
<script src="/js/utils.js"></script>
<script src="/js/api.js"></script>
<script src="/js/file-selector.js"></script>
<script src="/js/import-es.js"></script>
</body>
</html>